<template>
  <div class="container">
    <el-page-header @back="back" content="房屋详情" class="header"></el-page-header>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: `/`}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: `search`}">房屋查询</el-breadcrumb-item>
      <el-breadcrumb-item>房屋详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card" class="tabs">
      <el-tab-pane label="房屋详情">
        <div class="house-detail">
          <img :src="apartment.image" alt="房屋图片" class="house-image" />
          <div class="house-info">
            <div class="name">
              <strong>{{ apartment.areaName}}{{ apartment.communityName }}-{{ apartment.roomNumber }}</strong>
            </div>
            <div class="rent">
              <strong>租金：</strong>
              <span class="rent-amount">{{ apartment.monthlyRent }}</span> 元/月
            </div>
            <el-divider></el-divider>
            <div class="layout">
              <span class="layout-title">
                <strong>户型：</strong>
              </span>
              {{ apartment.rooms }}房{{ apartment.livingRooms }}厅{{ apartment.bathrooms }}卫{{ apartment.balconies }}阳
            </div>
            <div class="area">
              <strong>面积：</strong>
              {{ apartment.area }}
              <span class="area-title">平方米</span>
            </div>
            <div class="details">
              <div>
                <strong>房号：</strong>
                {{ apartment.roomNumber }}
              </div>
              <div>
                <strong>小区：</strong>
                {{ apartment.communityName }}
              </div>
              <div>
                <strong>区域：</strong>
                {{ apartment.areaName}}
              </div>
              <div>
                <strong>备注：</strong>
                {{ apartment.remarks }}
              </div>
              <el-button v-if="!$store.state.isLogin" type="info">请登录后再进行操作</el-button>
              <el-button v-else type="primary" @click="gotoApply">前往申请</el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="周边信息">
        只是拿高德地图api弄的一个demo，没有实际数据
        <div id="map-container"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import store from "@/utils/storage";
export default {
  name: "HouseDetail",
  data() {
    return {
      apartment: {}
    };
  },
  mounted() {
    this.getInfo();
    this.loadAMapScript().then(() => {
      this.initMap();
    });
  },
  methods: {
    gotoApply(){
      this.$message.warning("暂不支持申请指定房屋，请前往个人中心提交租赁申请资料")
    },
    back() {
      this.$router.push(
        "/search",
        () => {},
        () => {}
      );
    },
    getInfo() {
      this.$axios
        .post("apartment/query", {
          areaName: store.state.areaName,
          communityName: store.state.communityName,
          roomNumber: store.state.roomNumber,
          size: 1,
          curr: 0
        })
        .then(res => {
          this.apartment = res.data.data[0];
        });
    },
    loadAMapScript() {
      return new Promise((resolve, reject) => {
        if (typeof AMap !== "undefined") {
          resolve();
          return;
        }
        const script = document.createElement("script");
        script.src =
          "https://webapi.amap.com/maps?v=1.4.15&key=6ee8b38bd8f09e342c4700eb0e0f447a";
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },
    initMap() {
      this.loadAMapScript().then(() => {
        var map = new window.AMap.Map("map-container", {
          resizeEnable: true,
          center: [116.397428, 39.90923], // 设置地图中心点
          zoom: 10
        });
        // 以下功能可能都不生效，可忽略
        window.AMap.plugin("AMap.Geolocation", () => {
          var geolocation = new window.AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0,
            convert: true,
            showButton: true,
            buttonPosition: "LB",
            buttonOffset: new window.AMap.Pixel(10, 20),
            showMarker: true,
            showCircle: true,
            panToLocation: true,
            zoomToAccuracy: true
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
        });

        window.AMap.plugin("AMap.PlaceSearch", () => {
          var placeSearch = new window.AMap.PlaceSearch({
            type: "餐饮服务",
            pageSize: 5,
            pageIndex: 1,
            city: "北京"
          });
          placeSearch.searchNearBy(
            "",
            map.getCenter(),
            2000,
            (status, result) => {
              if (status === "complete" && result.info === "OK") {
                console.log(result);
              }
            }
          );
        });
      });
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 1487px;
  margin: 0 auto;
  padding: 20px;
}
.name {
  font-size: 24px;
  margin-bottom: 10px;
}
.header {
  margin-top: 10px;
  margin-bottom: 26px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.tabs {
  margin-top: 20px;
}

.house-detail {
  display: flex;
  align-items: flex-start;
  padding: 20px;
}

.house-image {
  width: 500px;
  height: auto;
  margin-right: 20px;
}

.house-info {
  flex: 1;
}
.rent {
  color: black;
  font-size: 18px;
  margin-bottom: 10px;
}

.rent-amount {
  color: red;
  font-size: 24px;
  margin-bottom: 10px;
}

.layout,
.area {
  font-size: 18px;
  margin-bottom: 10px;
}

.area-title {
  font-size: 15px;
}

.details div {
  margin-bottom: 5px;
}

.details strong {
  font-weight: bold;
}

#map-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
</style>
